<template>
  <lay-form :model="model" ref="layFormRef" class="MainForm" >



    <lay-form-item label="名称" prop="name" >
      <lay-input v-model="model.name" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="协议类型" prop="commType" >
      <lay-input v-model="model.commType" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="代理模式" prop="proxyMode" >
      <lay-input v-model="model.proxyMode" disabled></lay-input>
    </lay-form-item>



    <lay-form-item label="端口" prop="port" >
      <lay-input v-model="model.port" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="TCP超时" prop="timeout" >
      <lay-input v-model="model.timeout" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="ReadBuffer" prop="readBuffer" >
      <lay-input v-model="model.readBuffer" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="WriteBuffer" prop="writeBuffer" >
      <lay-input v-model="model.writeBuffer" disabled></lay-input>
    </lay-form-item>

    <lay-form-item label="逻辑离线时间" prop="logicTimeOut" >
      <lay-tooltip content="单位：秒"  >
        <lay-input v-model="model.logicTimeOut" disabled  ></lay-input>
      </lay-tooltip>


    </lay-form-item>




    <lay-form-item label="备注" prop="memo" >
      <lay-textarea  v-model="model.memo" style="" disabled></lay-textarea>

    </lay-form-item>



  </lay-form>




</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData"; 
 

export default {
  props:{
      id:String,
      data:Object
  },

  setup(prop:any, context:any) {
    const baseUrl="/commport";
    const myWin=ref<any>(null);
    const model = ref<any>({"id":"",
      "name":"",
      "commType":"",
      "port":"",
      "timeout":"",
      "readBuffer":"",
      "writeBuffer":"",
      "logicTimeOut":"",
      "keepAlive":"",
      "memo":"",
      "attachs":"",
    } )
    const layFormRef = ref<any>()

    const commTypeList=ref([
      {label:'TCP', value:'TCP'},
      {label:'UDP', value:'UDP'},
      {label:'HTTP', value:'HTTP' },
      {label:'MQTT', value:'MQTT' },
      {label:'WS', value:'MQTT' },
    ])

    const detail=async (id:string) =>{
      let r=await new MyHttp().post(baseUrl+"/detail", {id:id},
          {}
      );
      model.value=r.data;
    }

    onMounted(() =>{  
      myWin.value=new MyWin();
      detail(prop.id)
    });
    return {
      model,
      layFormRef,
      commTypeList,

    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 50px;
  text-align: center; 
  padding-top: 10px;
  
}  
.Pop .layui-body{
  padding-top: 10px;
  /* justify-content:start; */
   
}
.MainForm{
  margin: 10px;
  width:calc(100% - 30px);

} 
  
 
</style>